<template>
  <Card :bordered="false" dis-hover>
    <Button
      type="primary"
      class="ivu-mb-16"
      @click="handleAdd"
      v-hasC="{
        name: 'v1-settings-wechattemplate-add',
        flag: 'v1/settings/wechattemplate/add',
      }"
      >新增</Button
    >
    <Table
      :columns="columns"
      :data="list"
      :loading="loading"
      v-hasC="{
        name: 'v1-settings-wechattemplate-list',
        flag: 'v1/settings/wechattemplate/list',
      }"
    >
      <template #type="{ row }">
        {{row.type == 1?'预约挂号提醒':'取消预约挂号提醒'}}
      </template>
      <template #status="{ row }">
        <Badge v-if="row.status == 0" status="warning" text="停用" />
        <Badge v-else status="processing" text="正常" />
      </template>
      <template #action="{ row }">
        <a
          @click="handleEdit(row)"
          v-hasC="{
            name: 'v1-settings-wechattemplate-edit',
            flag: 'v1/settings/wechattemplate/edit',
          }"
          >编辑</a
        >
        <Divider type="vertical"></Divider>
        <a
          @click="handleDelete(row)"
          class="delete"
          v-if="row.status == 0"
          v-hasC="{
            name: 'v1-settings-wechattemplate-del',
            flag: 'v1/settings/wechattemplate/del',
          }"
          >删除</a>
          <a
          @click="handleDelete(row)"
          v-else
          disabled
          v-hasC="{
            name: 'v1-settings-wechattemplate-del',
            flag: 'v1/settings/wechattemplate/del',
          }"
          >删除</a>
      </template>
    </Table>
    <Page
      :total="total"
      class="ivu-mt-16"
      v-model="params.page"
      :page-size="params.pageSize"
      @on-change="formSize"
      show-total
      show-elevator
      show-sizer
      @on-page-size-change="formChangePage"
      v-hasC="{
        name: 'v1-settings-wechattemplate-list',
        flag: 'v1/settings/wechattemplate/list',
      }"
    />
    <Modal
      :title="add ? '新增' : '编辑'"
      width="600"
      v-model="articleModal"
      :mask-closable="false"
      :draggable="true"
      footer-hide
    >
      <Form :label-width="80" :model="formData" ref="formItem" :rules="rules">
        <FormItem label="名称" prop="name">
          <Input placeholder="请输入名称" v-model="formData.name" />
        </FormItem>
        <FormItem label="类型" prop="type">
          <Select placeholder="请选择类型" v-model="formData.type" >
            <Option :value="+item.value" v-for="item in typeList" :key="item.value">{{item.label}}</Option>
          </Select >
        </FormItem>
        <FormItem label="模板id" prop="template_id">
          <Input placeholder="请输入模板id" v-model="formData.template_id" />
        </FormItem>
        <FormItem label="字段" prop="items_remark">
          <Input type="textarea" :rows="4" placeholder="请输入字段,一行一个" v-model="formData.items_remark" />
        </FormItem>
        <FormItem label="状态" prop="status">
          <Switch v-model="formData.status" />
        </FormItem>
      </Form>
      <div slot="footer" class="modalFoot">
        <Button @click="canceledit()">取消</Button>
        <Button
          :loading="subloading"
          type="primary"
          @click="sendData"
          class="ivu-ml-16"
          >确定</Button
        >
      </div>
    </Modal>
  </Card>
</template>
<script>
import { listTemplate,addTemplate,updateTemplate,delTemplate } from "@/api/jzy";
export default {
  name: "wechattemplate",
  data() {
    return {
      add: true,
      total: 0,
      articleModal: false,
      subloading: false,
      params: {
        pageSize: 10
      },
      formData: {
        name: "",
        type:1,
        template_id:'',
        items_remark:'',
        status: true,
      },
      rules: {
        name: [
          { required: true, message: "请输入名称", trigger: "bulr" }
        ],
        type: [
          { required: true, message: "请选择类型", trigger:'change,bulr' ,type:"number" }
        ],
        template_id: [
          { required: true, message: "请输入模板ID", trigger: "bulr" }
        ],
        items_remark: [
          { required: true, message: "请输入字段", trigger: "bulr" }
        ]
      },
      columns: [
        {
          title: "名称",
          key: "name",
        },
        {
          title: "类型",
          slot: "type",
          width:150
        },
        {
          title: "模板ID",
          key: "template_id",
          tooltip:true
        },
        {
          title: "字段",
          key: "items_remark",
          tooltip:true
        },
        {
          title: "状态",
          slot: "status",
          width:80
        },
        {
          title: "创建时间",
          key: "created_at",
          width:170
        },
        {
          title: "操作",
          slot: "action",
        },
      ],
      list: [],
      loading: false,
      typeList:[]
    };
  },
  methods: {
    askData() {
      this.params.page = 1;
      this.getData();
    },
    getData() {
      const params = this.params;
      this.loading = true;
      listTemplate(params)
        .then((res) => {
          this.list = res.list;
          this.total = res.total;
          this.typeList=res.type
        })
        .finally(() => {
          this.loading = false;
        });
    },
    sendData() {
      this.$refs["formItem"].validate((valid) => {
        if (valid) {
          let params={...this.formData}
          params.status=params.status?1:0
          this.subloading=true
          if(!this.add&&params.id!=''){
            updateTemplate(params)
            .then((res) => {
              this.subloading=false
              this.articleModal = false;
              this.getData()
            })
            .finally(() => {
              this.subloading=false
            });
          }else{
            addTemplate(params)
            .then((res) => {
              this.subloading=false
              this.articleModal = false;
              this.getData()
            })
            .finally(() => {
              this.subloading=false
            });
          }
          
        }
      });
    },
    canceledit() {
      this.articleModal = false;
    },
    formSize(e) {
      this.params.page = e;
      this.getData();
    },
    formChangePage(e) {
      this.params.pageSize = e;
      this.askData();
    },
    handleAdd() {
      this.add = true;
      this.articleModal = true;
      this.$refs['formItem'].resetFields()  
      this.formData={
        name: "",
        type:1,
        template_id:'',
        items_remark:'',
        status: true,
      } 
    },
    handleEdit(row) {
      this.add = false;
      this.articleModal = true;
      this.$refs['formItem'].resetFields()
      this.formData= {
        id:row.id,
        name: row.name,
        type:+row.type,
        template_id:row.template_id,
        items_remark:row.items_remark,
        status: +row.status?true:false,
      }
    },
    handleDelete(row) {
      this.$Modal.confirm({
        title: "温馨提示",
        content: "确定删除此项?",
        onOk: () => {
          delTemplate({ id: row.id }).then((res) => {
            this.$Message.success("删除成功！");
            this.askData();
          });
        },
      });
    },
  },
  mounted() {
    this.getData();
  },
};
</script>
<style lang='less' scoped>
.delete {
  color: rgb(226, 5, 5);
}
.modalFoot {
  text-align: right;
  border-top: 1px solid #ddd;
  padding-top: 16px;
  margin-top: 24px;
}
</style>
